import { arrayToObject, formatGMTDate, toPercent, compareObject } from '../../../../assets/js/util.js'
import echarts from 'echarts'
export default {
    data() {
        return {
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            title: '角色等级分析',
            xlsxTitle: '',
            // 默认参数 和 URL
            SRC: '',
            DP: {
                p: '',
                f: ''
            },
            loading: false,
            searchable: false,
            // 平台数组
            plats: [],
            // 服务器数组
            servers: [],
            // 渠道数组
            channels: [],
            // 选择职业
            jobs: [],
            // 平台数组
            plats2: [],
            // 服务器数组
            servers2: [],
            // 渠道数组
            channels2: [],
            // 选择职业
            jobs2: [],
            // 提交数据
            form: {
                dsearch: '',
                platform: '0',
                channel: '0',
                server: '0',
                job: '-99999',
                dcompare: '',
                platform2: '0',
                channel2: '0',
                server2: '0',
                job2: '-99999'
            },
            // 分页一
            page1: {
                /*当前页显示数量*/
                pageSize: 10,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            // 分页二
            page2: {
                /*当前页显示数量*/
                pageSize: 10,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            // 分页三
            page3: {
                /*当前页显示数量*/
                pageSize: 10,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            // 分页三
            page4: {
                /*当前页显示数量*/
                pageSize: 10,
                /*每页显示的数量*/
                pageSizes: [10, 20, 50, 100],
                /*dataTotal表数量*/
                dataTotal: 0,
                /*分页器*/
                currentPage: 1,
            },
            tableHeaderAll21: [
                { "prop": "day", "label": "日期", "fixed": true },
                { "prop": "platformName", "label": "平台", "fixed": false },
                { "prop": "channelName", "label": "渠道", "fixed": false },
                { "prop": "serverName", "label": "区服", "fixed": false },
                { "prop": "schoolName", "label": "职业", "fixed": false },
                { "prop": "level", "label": "等级", "fixed": false },
                { "prop": "num", "label": "角色数", "fixed": false },
                { "prop": "levelPercent", "label": "等级人数占比", "fixed": false }
            ],
            tableData21: [],
            tableDataAll21: [],
            tableHeaderAll22: [
                { "prop": "day", "label": "日期", "fixed": true },
                { "prop": "platformName", "label": "平台", "fixed": false },
                { "prop": "channelName", "label": "渠道", "fixed": false },
                { "prop": "serverName", "label": "区服", "fixed": false },
                { "prop": "schoolName", "label": "职业", "fixed": false },
                { "prop": "level", "label": "等级", "fixed": false },
                { "prop": "num", "label": "角色数", "fixed": false },
                { "prop": "levelPercent", "label": "等级人数占比", "fixed": false }
            ],
            tableData22: [],
            tableDataAll22: [],
            tableHeaderAll23: [
                { "prop": "day", "label": "日期", "fixed": true },
                { "prop": "platformName", "label": "平台", "fixed": false },
                { "prop": "channelName", "label": "渠道", "fixed": false },
                { "prop": "serverName", "label": "区服", "fixed": false },
                { "prop": "schoolName", "label": "职业", "fixed": false },
                { "prop": "level", "label": "等级", "fixed": false },
                { "prop": "num", "label": "角色数", "fixed": false },
                { "prop": "levelPercent", "label": "等级人数占比", "fixed": false }
            ],
            tableData23: [],
            tableDataAll23: [],
            tableHeaderAll24: [
                { "prop": "day", "label": "日期", "fixed": true },
                { "prop": "platformName", "label": "平台", "fixed": false },
                { "prop": "channelName", "label": "渠道", "fixed": false },
                { "prop": "serverName", "label": "区服", "fixed": false },
                { "prop": "schoolName", "label": "职业", "fixed": false },
                { "prop": "level", "label": "等级", "fixed": false },
                { "prop": "firstDayPassRadio", "label": "首日通过率", "fixed": false },
                { "prop": "firstWeekPassRadio", "label": "首周通过率", "fixed": false },
                { "prop": "secondWeekPassRadio", "label": "双周通过率", "fixed": false },
                { "prop": "firstMonthPassRadio", "label": "首月通过率", "fixed": false }
            ],
            tableData24: [],
            tableDataAll24: [],
            real1: {
                color: ['#2eb398', '#9d79d8', '#79bde9'],
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: []
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        interval: 4,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value}'
                    }
                },
                grid: {
                    left: '0%',
                    right: '1%',
                    bottom: '15%',
                    containLabel: true
                },
                toolbox: {
                    right: '20',
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: [{
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [{
                    name: 'pcu',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    data: []
                }, {
                    name: 'acu',
                    type: 'line',
                    smooth: true,
                    data: [],
                    symbol: 'roundRect',
                }, {
                    name: 'acu',
                    type: 'line',
                    smooth: true,
                    data: [],
                    symbol: 'triangle',
                }]
            },
        }
    },
    computed: {
        // xlsx() {
        //     return this.title + '.xlsx'
        // }
    },
    methods: {
        // 初始化
        chartsWidth(el) {
            if (document.getElementById(el) !== null) {
                document.getElementById(el).style.width = window.innerWidth - 290 + "px";
            }
        },
        // 时间改变 得到起始时间和结束时间
        dateChange(val) {
            if (val === undefined || val === '') {
                this.errorFun('请选择查看时间！')
            } else {
                this.form.dsearch = val;
            }
        },
        // 时间改变 得到起始时间和结束时间
        dateChange2(val) {
            if (val === undefined || val === '') {
                this.errorFun('请选择查看时间！')
            } else {
                this.form.dcompare = val;
            }
        },
        _init() {
            this.form.dsearch = formatGMTDate(new Date(new Date().getTime() - 86400000 * 1), true);
            this.form.dcompare = formatGMTDate(new Date(new Date().getTime() - 86400000 * 2), true);
            this.getList('initParam', '', 0);
            var arr = ['chart1', 'chart2', 'chart3'];
            var arrReals = [this.real1, this.real1, this.real1];
            for (var x = 0; x < arr.length; x++) {
                this.chartsWidth(arr[x]);
                this[arr[x] + 'Charts'] = echarts.init(document.getElementById(arr[x]));
                this[arr[x] + 'Charts'].setOption(arrReals[x]);
            }
            window.addEventListener('resize', function() {
                for (var i in arr) {
                    this.chartsWidth(arr[i])
                }
                var resizeArr = ['chart1Charts', 'chart2Charts', 'chart3Charts']
                for (var j in resizeArr) {
                    this[resizeArr[j]].resize();
                }
            }.bind(this))
        },
        successFun(data) {
            this.$message({
                message: data,
                type: 'success'
            });
        },
        errorFun(data) {
            this.$message.error(data);
        },
        // 表格下载
        excel(tableIndex, sheet) {
            this.xlsxTitle = sheet + "-" + this.form.dsearch + "对比" + this.form.dcompare;
            this.downloadExl(this['tableHeader' + tableIndex], this['tableData' + tableIndex], this.xlsxTitle, sheet);
        },
        handleSizeChange1(val) {
            this.page1.pageSize = val;
            this.tableControl1();
        },
        handleCurrentChange1(val) {
            this.page1.currentPage = val;
            this.tableControl1();
        },
        tableControl1() {
            this.tableData21 = this.tableDataAll21.slice((this.page1.currentPage - 1) * this.page1.pageSize, this.page1.currentPage * this.page1.pageSize);
        },
        handleSizeChange2(val) {
            this.page2.pageSize = val;
            this.tableControl2();
        },
        handleCurrentChange2(val) {
            this.page2.currentPage = val;
            this.tableControl2();
        },
        tableControl2() {
            this.tableData22 = this.tableDataAll22.slice((this.page2.currentPage - 1) * this.page2.pageSize, this.page2.currentPage * this.page2.pageSize);
        },
        handleSizeChange3(val) {
            this.page3.pageSize = val;
            this.tableControl3();
        },
        handleCurrentChange3(val) {
            this.page3.currentPage = val;
            this.tableControl3();
        },
        tableControl3() {
            this.tableData23 = this.tableDataAll23.slice((this.page3.currentPage - 1) * this.page3.pageSize, this.page3.currentPage * this.page3.pageSize);
        },
        handleSizeChange4(val) {
            this.page4.pageSize = val;
            this.tableControl4();
        },
        handleCurrentChange4(val) {
            this.page4.currentPage = val;
            this.tableControl4();
        },
        tableControl4() {
            this.tableData24 = this.tableDataAll24.slice((this.page4.currentPage - 1) * this.page4.pageSize, this.page4.currentPage * this.page4.pageSize);
        },
        // 平台切换 渠道切换 区服切换
        selectPlats(val) {
            this.getList("updatePlatform", `platform=${val}`, 1);
        },
        selectChannels(val) {
            this.getList("updateChannel", `channel=${val}`, 1);
        },
        selectServers(val) {
            this.getList("updateServer", `server=${val}`, 1);
        },
        // 对比 平台切换 渠道切换 区服切换
        selectPlats2(val) {
            this.getList("updatePlatform2", `platform=${val}`, 2);
        },
        selectChannels2(val) {
            this.getList("updateChannel2", `channel=${val}`, 2);
        },
        selectServers2(val) {
            this.getList("updateServer2", `server=${val}`, 2);
        },
        // 变成分数
        pencent(data) {
            //转换为%比 
            for (var i = 0; i < data.length; i++) {
                for (var j in data[i]) {
                    if (j === 'levelPercent' || j === 'firstDayPassRadio' || j === "firstWeekPassRadio" || j === 'secondWeekPassRadio' || j === "firstMonthPassRadio") {
                        data[i][j] = toPercent(data[i][j]);
                    }
                }
            }
            return data
        },
        // 重置
        reset(form) {
            this.form = {
                dsearch: '',
                platform: '0',
                channel: '0',
                server: '0',
                job: '-99999',
                dcompare: '',
                platform2: '0',
                channel2: '0',
                server2: '0',
                job2: '-99999'
            }
            this._init();
        },
        // 查询
        search(form) {
            this.form.dsearch = formatGMTDate(this.form.dsearch, true);
            this.form.dcompare = formatGMTDate(this.form.dcompare, true)
            this.getData(this.form);
        },
        echartsData(d) {
            // 新增角色职业等级分布
            if (d.newRoleSchoolLevelDistributeChart === undefined) {
                var data1 = {
                    "columnkeys": [],
                    "names": [],
                    "data": [
                        []
                    ]
                }
            } else {
                var data1 = d['newRoleSchoolLevelDistributeChart']['jsonStr'];
            }
            this.chart1Charts.setOption({
                legend: {
                    data: data1['names']
                },
                tooltip: {
                    formatter: function(params, ticket, callback) {
                        var res = '';
                        for (var i = 0, l = params.length; i < l; i++) {
                            //鼠标悬浮显示的字符串内容
                            res += params[i].seriesName + '- 等级' + params[i].name + ' : ' + toPercent(params[i].value) + '<br/>'
                        }
                        return res
                    }
                },
                xAxis: {
                    data: data1.columnkeys
                },
                yAxis: {
                    axisLabel: {
                        formatter: function(val) {
                            val = toPercent(val);
                            return val
                        }
                    }
                },
                series: [{
                        name: data1.names[0],
                        data: data1.data[0]
                    },
                    {
                        name: data1.names[1],
                        data: data1.data[1]
                    }
                ]
            });
            // 次日流失新增角色职业等级分布
            if (d.newRoleSchoolSecondLostLevelDistributeChart === undefined) {
                var data2 = {
                    "columnkeys": [],
                    "names": [],
                    "data": [
                        []
                    ]
                }
            } else {
                var data2 = d['newRoleSchoolSecondLostLevelDistributeChart']['jsonStr'];
            }
            this.chart2Charts.setOption({
                color: ['#9d79d8', '#2eb398', '#79bde9'],
                legend: {
                    data: data2['names']
                },
                tooltip: {
                    formatter: function(params, ticket, callback) {
                        var res = '';
                        for (var i = 0, l = params.length; i < l; i++) {
                            //鼠标悬浮显示的字符串内容
                            res += params[i].seriesName + '- 等级' + params[i].name + ' : ' + toPercent(params[i].value) + '<br/>'
                        }
                        return res
                    }
                },
                xAxis: {
                    data: data2.columnkeys
                },
                yAxis: {
                    axisLabel: {
                        formatter: function(val) {
                            val = toPercent(val);
                            return val
                        }
                    }
                },
                series: [{
                        name: data2.names[0],
                        data: data2.data[0]
                    },
                    {
                        name: data2.names[1],
                        data: data2.data[1]
                    }
                ]
            });
            // 次日流失新增角色职业等级分布
            if (d.newRoleSchoolSecondLostLevelDistributeChart === undefined) {
                var data3 = {
                    "columnkeys": [],
                    "names": [],
                    "data": [
                        []
                    ]
                }
            } else {
                var data3 = d['activeRoleSchoolLevelDistributeChart']['jsonStr'];
            }
            console.log(d.newRoleSchoolSecondLostLevelDistributeChart)
            this.chart3Charts.setOption({
                color: ['#9d79d8', '#79bde9', '#2eb398'],
                legend: {
                    data: data3['names']
                },
                tooltip: {
                    formatter: function(params, ticket, callback) {
                        var res = '';
                        for (var i = 0, l = params.length; i < l; i++) {
                            //鼠标悬浮显示的字符串内容
                            res += params[i].seriesName + '- 等级' + params[i].name + ' : ' + toPercent(params[i].value) + '<br/>'
                        }
                        return res
                    }
                },
                xAxis: {
                    data: data3.columnkeys
                },
                yAxis: {
                    axisLabel: {
                        formatter: function(val) {
                            val = toPercent(val);
                            return val
                        }
                    }
                },
                series: [{
                        name: data3.names[0],
                        data: data3.data[0]
                    },
                    {
                        name: data3.names[1],
                        data: data3.data[1]
                    }
                ]
            });
        },
        /*获取LIST*/
        getList(url, choose, num) {
            var that = this;
            // 将数据push到选择框中
            var pushData = function(pushArr, attr, data) {
                that[pushArr] = [];
                for (var i in data[attr]) {
                    that[pushArr].push({
                        label: i,
                        value: data[attr][i]
                    })
                }
            };
            var p = new Promise(function(resolve, reject) {
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=${url}`, {
                    params: { 'ps': choose }
                }).then(function(res) {
                    resolve(res.body)
                })
            });
            p.then(function(value) {
                var data = JSON.parse(JSON.parse(value));
                if (parseInt(data["res"]) === 0) {
                    if (num === 0) {
                        // 后台select的数据
                        var lists = ["platformItmes", "serverItmes", "channelItmes", "jobs", "platformItmes2", "serverItmes2", "channelItmes2", "jobs"];
                        // 页面select名字
                        var nameLists = ["plats", "servers", "channels", "jobs", "plats2", "servers2", "channels2", "jobs2"];
                    } else if (num === 1) {
                        var lists = ["platformItmes", "serverItmes", "channelItmes"];
                        var nameLists = ["plats", "servers", "channels"];
                    } else if (num === 2) {
                        var lists = ["platformItmes", "serverItmes", "channelItmes"];
                        // 页面select名字
                        var nameLists = ["plats2", "servers2", "channels2"];
                    }
                    for (var i = 0; i < lists.length; i++) {
                        if (data[lists[i]] !== undefined) {
                            pushData(nameLists[i], lists[i], data);
                        }
                    }
                } else {
                    that.getErrorMsg(Number(data.res))
                }
            })
        },
        /*获取数据*/
        getData(data) {
            var that = this;
            var p = new Promise(function(resolve, reject) {
                that.dataTotal = 0;
                that.loading = true;
                that.tableData = [];
                that.tableDataAll = [];
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=search`, {
                    params: { 'ps': `channel=${data.channel}&channel2=${data.channel2}&dcompare=${data.dcompare}&dsearch=${data.dsearch}&job=${data.job}&job2=${data.job2}&platform=${data.platform}&platform2=${data.platform2}&server=${data.server}&server2=${data.server2}` }
                }).then(function(res) {
                    resolve(res.body)
                })
            })
            p.then(function(value) {
                that.loading = false;
                var data = JSON.parse(value)
                var d = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (parseInt(d["res"]) === 0) {
                    // echarts 1 
                    that.echartsData(d)
                        //表格1
                    that.page1.dataTotal = d.newRoleSchoolLevelDistributeDatas.length;
                    that.tableDataAll21 = that.pencent(d.newRoleSchoolLevelDistributeDatas);
                    that.tableControl1();
                    //表格2
                    that.page2.dataTotal = d.newRoleSchoolSecondLostLevelDistributeDatas.length;
                    that.tableDataAll22 = that.pencent(d.newRoleSchoolSecondLostLevelDistributeDatas);
                    that.tableControl2();
                    //表格3
                    that.page3.dataTotal = d.activeRoleSchoolLevelDistributeDatas.length;
                    that.tableDataAll23 = that.pencent(d.activeRoleSchoolLevelDistributeDatas);
                    that.tableControl3();
                    //表格4
                    that.page4.dataTotal = d.roleSchoolLevelPassRadioDatas.length;
                    that.tableDataAll24 = that.pencent(d.roleSchoolLevelPassRadioDatas);
                    that.tableControl4();
                } else {
                    that.errorFun(data["msg"])
                }
            })
        },
        // 表格排序
        sortChange(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll21.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll21.sort(compareObject(column.prop, true));
            }
            this.tableControl1();
        },
        // 表格排序
        sortChange2(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll22.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll22.sort(compareObject(column.prop, true));
            }
            this.tableControl2();
        },
        // 表格排序
        sortChange3(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll23.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll23.sort(compareObject(column.prop, true));
            }
            this.tableControl3();
        },
        // 表格排序
        sortChange4(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.tableDataAll24.sort(compareObject(column.prop, false));
            } else { //正序
                this.tableDataAll24.sort(compareObject(column.prop, true));
            }
            this.tableControl4();
        }
    },
    mounted() {
        // 初始化URL
        this.SRC = this.$store.getters.src;
        this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
        this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
        this._init();
        this.getData(this.form);
        // this.getData(this.pageSize,this.currentPage)
    }
}